<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI专利申请文本生成工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
        }
        /* .tab-active {
            color: #0284c7;
            border-bottom: 2px solid #0284c7;
        }
       .tab-inactive {
            color: #6b7280;
        }
       .tab-inactive:hover {
            color: #0284c7;
        } */
        .upload-area { transition: all 0.3s ease; }
        .upload-area:hover { border-color: #0284c7; background-color: #f0f9ff; }
        .upload-area.dragover { border-color: #0284c7; background-color: #e0f2fe; transform: scale(1.02); }
        .progress-bar { transition: width 0.3s ease; }
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .status-draft { background-color: #e5e7eb; color: #4b5563; }
        .status-progress { background-color: #fef3c7; color: #92400e; }
        .status-completed { background-color: #d1fae5; color: #065f46; }
        /* 在<style>标签中添加以下样式 */
        .tab-button {
            color: #6b7280;
            background-color: transparent;
        }

        .tab-button.tab-active {
            color: #5d92de;
            background-color: rgb(255, 255, 255);
            box-shadow: 0 1px 3px 0 rgba(150, 122, 249, 0.5), 0 1px 2px 0 rgba(151, 125, 246, 0.06);
        }

        .tab-button:hover:not(.tab-active) {
            color: #374151;
            background-color: rgba(233, 229, 248, 0.5);
        }

        .disclosure-item.selected {
            border-color: #3b82f6;
            background-color: #eff6ff;
            box-shadow: 0 0 0 1px #3b82f6;
        }

        .upload-area.dragover {
            border-color: #3b82f6;
            background-color: #eff6ff;
            transform: scale(1.01);
        }

        /* 改进的状态标签样式 */
        .status-completed {
            background-color: #dcfce7;
            color: #166534;
        }

        .status-progress {
            background-color: #dbeafe;
            color: #1d4ed8;
        }

        .status-draft {
            background-color: #f3f4f6;
            color: #374151;
        }
    </style>
</head>
<body class="bg-gray-50 text-black">
    <!-- 主面板 -->
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div class="w-96 bg-gradient-to-b from-white to-gray-50 shadow-lg flex flex-col h-full border-r border-gray-200">
            <!-- 顶部标题区域 -->
            <div class="p-6 border-b border-gray-100 bg-white">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                        <i class="ri-file-list-3-line text-white text-lg"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900">申请书档案</h2>
                        <!-- <p class="text-xs text-gray-500">管理您的专利申请文档</p> -->
                    </div>
                </div>
                
                <!-- 搜索框 - 改进设计 -->
                <div class="relative">
                    <input type="text" placeholder="搜索申请书..." 
                           class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-300 rounded-xl text-sm 
                                  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent 
                                  focus:bg-white transition-all duration-200">
                    <i class="ri-search-line absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                    <button class="absolute right-3 top-3 text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="ri-filter-3-line text-sm"></i>
                    </button>
                </div>
            </div>

            <!-- 历史申请书列表 -->
            <div class="flex-1 overflow-y-auto px-6">
                <div class="space-y-3 max-w-6xl">
                    <!-- 申请书项目 1 - 改进设计 -->
                    <div class="group bg-white rounded-xl border border-gray-300 hover:border-blue-300 
                                hover:shadow-md transition-all duration-200 cursor-pointer overflow-visible" 
                         onclick="showApplicationResult(1)">
                        <div class="p-4">
                            <!-- 第一行：标题和操作按钮 -->
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900 text-sm truncate group-hover:text-blue-700 
                                           transition-colors flex-1 mr-2">一种智能语音识别系统</h3>
                                <div class="relative">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 transition-colors" 
                                            onclick="event.stopPropagation(); toggleDropdown(this)">
                                        <i class="ri-more-2-line text-lg"></i>
                                    </button>
                                    <!-- 下拉菜单 -->
                                    <div class="absolute right-0 top-full mt-1 w-32 bg-white border border-gray-200 
                                                rounded-lg shadow-lg z-50 hidden">
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); downloadFile()">
                                            <i class="ri-download-line mr-2"></i>下载
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); shareFile()">
                                            <i class="ri-share-line mr-2"></i>分享
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); evaluateFile()">
                                            <i class="ri-file-line mr-2"></i>去评估
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 
                                                       flex items-center" onclick="event.stopPropagation(); deleteFile()">
                                            <i class="ri-delete-bin-line mr-2"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 第二行：时间和状态 -->
                            <div class="flex items-center justify-between text-xs">
                                <span class="flex items-center text-gray-500">
                                    <i class="ri-calendar-line mr-1"></i>
                                    2024-01-18
                                </span>
                                <span class="status-badge status-progress">我创建的</span>
                            </div>
                        </div>
                    </div>

                    <!-- 申请书项目 2 -->
                    <div class="group bg-white rounded-xl border border-gray-300 hover:border-green-300 
                                hover:shadow-md transition-all duration-200 cursor-pointer overflow-visible" 
                         onclick="showApplicationResult(2)">
                        <div class="p-4">
                            <!-- 第一行：标题和操作按钮 -->
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900 text-sm truncate group-hover:text-green-700 
                                           transition-colors flex-1 mr-2">一种区块链数据存储方法</h3>
                                <div class="relative">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 transition-colors" 
                                            onclick="event.stopPropagation(); toggleDropdown(this)">
                                        <i class="ri-more-2-line text-lg"></i>
                                    </button>
                                    <!-- 下拉菜单 -->
                                    <div class="absolute right-0 top-full mt-1 w-32 bg-white border border-gray-200 
                                                rounded-lg shadow-lg z-50 hidden">
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); downloadFile()">
                                            <i class="ri-download-line mr-2"></i>下载
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); shareFile()">
                                            <i class="ri-share-line mr-2"></i>分享
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); evaluateFile()">
                                            <i class="ri-file-line mr-2"></i>去评估
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 
                                                       flex items-center" onclick="event.stopPropagation(); deleteFile()">
                                            <i class="ri-delete-bin-line mr-2"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 第二行：时间和状态 -->
                            <div class="flex items-center justify-between text-xs">
                                <span class="flex items-center text-gray-500">
                                    <i class="ri-calendar-line mr-1"></i>
                                    2024-01-18
                                </span>
                                <span class="status-badge status-progress">我创建的</span>
                            </div>
                        </div>
                    </div>

                    <!-- 申请书项目 3 -->
                    <div class="group bg-white rounded-xl border border-gray-300 hover:border-purple-300 
                                hover:shadow-md transition-all duration-200 cursor-pointer overflow-visible" 
                         onclick="showApplicationResult(2)">
                        <div class="p-4">
                            <!-- 第一行：标题和操作按钮 -->
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-semibold text-gray-900 text-sm truncate group-hover:text-purple-700 
                                           transition-colors flex-1 mr-2">一种机器学习算法优化</h3>
                                <div class="relative">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 transition-colors" 
                                            onclick="event.stopPropagation(); toggleDropdown(this)">
                                        <i class="ri-more-2-line text-lg"></i>
                                    </button>
                                    <!-- 下拉菜单 -->
                                    <div class="absolute right-0 top-full mt-1 w-32 bg-white border border-gray-200 
                                                rounded-lg shadow-lg z-50 hidden">
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); downloadFile()">
                                            <i class="ri-download-line mr-2"></i>下载
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); shareFile()">
                                            <i class="ri-share-line mr-2"></i>分享
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 
                                                       flex items-center" onclick="event.stopPropagation(); evaluateFile()">
                                            <i class="ri-file-line mr-2"></i>去评估
                                        </button>
                                        <button class="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 
                                                       flex items-center" onclick="event.stopPropagation(); deleteFile()">
                                            <i class="ri-delete-bin-line mr-2"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 第二行：时间和状态 -->
                            <div class="flex items-center justify-between text-xs">
                                <span class="flex items-center text-gray-500">
                                    <i class="ri-calendar-line mr-1"></i>
                                    2024-01-18
                                </span>
                                <span class="status-badge status-completed">他人分享的</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多按钮 -->
                <div class="mt-4 text-center">
                    <button class="px-4 py-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 
                                   rounded-lg transition-colors flex items-center justify-center mx-auto">
                        <i class="ri-refresh-line mr-2"></i>
                        加载更多
                    </button>
                </div>
            </div>

            <!-- 底部统计信息 -->
            <div class="px-6 py-4 bg-white border-t border-gray-200">
                <div class="grid grid-cols-3 gap-4 text-center">
                    <div>
                        <div class="text-lg font-semibold text-blue-600">12</div>
                        <div class="text-xs text-gray-500">总申请书</div>
                    </div>
                    <div>
                        <div class="text-lg font-semibold text-green-600">8</div>
                        <div class="text-xs text-gray-500">我创建的</div>
                    </div>
                    <div>
                        <div class="text-lg font-semibold text-yellow-600">4</div>
                        <div class="text-xs text-gray-500">他人分享的</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧内容区 -->
        <div class="flex-1 overflow-y-auto bg-gray-50">
            <!-- 新建申请书页 -->
            <div class="px-6 py-8 bg-white border-b border-gray-100">
                <div class="px-6 bg-white border-b border-gray-100">
                    <!-- 优化说明文字 -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">新建申请书</h3>
                        <p class="text-gray-600 text-sm">请选择交底书文件，AI将辅助生成符合专利申请要求的文档。</p>
                    </div>
                    
                    <!-- 改进的标签页设计 -->
                    <div class="bg-white p-1 rounded-lg mb-6 inline-flex hidden">
                        <button id="textTab" class="tab-button tab-active flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200">
                            <i class="ri-history-line mr-2"></i>
                            <span>选择交底书</span>
                        </button>
                        <button id="fileTab" class="tab-button flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200">
                            <i class="ri-upload-2-line mr-2"></i>
                            <span>上传交底书</span>
                        </button>
                    </div>
                
                    <!-- 历史交底书列表 - 修改为左右分栏布局 -->
                    <h3 class="px-4 py-4 text-sm font-medium rounded-md">选择交底书</h3>
                    <div id="disclosureList" class="h-96 border border-gray-200 rounded-xl bg-white flex">
                        <!-- 左侧：交底书列表（主要区域） -->
                        <div class="w-3/5 border-r border-gray-200 bg-white">
                            <div class="p-4">
                                <!-- 显示搜索交底书框和交底书总数 -->
                                <div class="flex justify-between items-center mb-4">
                                    <div class="relative">
                                        <input type="text" id="searchInput" placeholder="搜索交底书档案记录..."
                                            class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-300 rounded-xl text-sm 
                                                    placeholder-gray-400 focus:outline-none focus:border-purple-500">
                                        <i class="ri-search-line absolute top-1/2 transform -translate-y-1/2 left-4 text-gray-400"></i>
                                    </div>
                                    <span id="totalDisclosures" class="text-sm text-gray-500">共 10 条记录</span>                       
                                </div>
                                <div class="space-y-3 overflow-y-auto h-80">
                                    <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" data-disclosure-id="1">
                                        <div class="flex items-center">
                                            <div class="flex-1">
                                                <div class="flex items-center justify-between mb-1">
                                                    <h5 class="text-sm font-semibold text-gray-900">智能语音识别系统</h5>
                                                    <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium">我创建的</span>
                                                </div>
                                                <p class="text-xs text-gray-500">修改时间：2024-01-15</p>
                                            </div>
                                            <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                                <i class="ri-arrow-right-s-line text-blue-500 text-lg"></i>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" data-disclosure-id="2">
                                        <div class="flex items-center">
                                            <div class="flex-1">
                                                <div class="flex items-center justify-between mb-1">
                                                    <h5 class="text-sm font-semibold text-gray-900">区块链数据存储方法</h5>
                                                    <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium">我创建的</span>
                                                </div>
                                                <p class="text-xs text-gray-500">修改时间：2024-01-20</p>
                                            </div>
                                            <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                                <i class="ri-arrow-right-s-line text-blue-500 text-lg"></i>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="disclosure-item group p-4 rounded-xl border-2 border-gray-200 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" data-disclosure-id="3">
                                        <div class="flex items-center">
                                            <div class="flex-1">
                                                <div class="flex items-center justify-between mb-1">
                                                    <h5 class="text-sm font-semibold text-gray-900">机器学习算法优化</h5>
                                                    <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-medium">他人分享的</span>
                                                </div>
                                                <div class="flex items-center space-x-4">
                                                    <p class="text-xs text-gray-500">修改时间：2024-01-25</p>
                                                    <p class="text-xs text-gray-500">分享人：XXX账号</p>
                                                </div>
                                            </div>
                                            <div class="opacity-0 group-hover:opacity-100 transition-opacity">
                                                <i class="ri-arrow-right-s-line text-blue-500 text-lg"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 右侧：查新对比记录列表（次要区域） -->
                        <div class="w-2/5 bg-gray-50">
                            <div class="p-4">
                                <div class="flex justify-between items-center mb-4">
                                    <div class="flex items-center">
                                        <i class="ri-link text-gray-400 mr-2"></i>
                                        <h4 class="text-sm font-medium text-gray-700">关联查新记录</h4>
                                    </div>
                                    <span id="totalNoveltyRecords" class="text-xs text-gray-400">共 0 条</span>
                                </div>
                                
                                <!-- 未选择交底书时的提示 -->
                                <div id="noDisclosureSelected" class="flex flex-col items-center justify-center h-80 text-center">
                                    <div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mb-3">
                                        <i class="ri-file-search-line text-xl text-gray-400"></i>
                                    </div>
                                    <p class="text-gray-400 text-sm mb-1">请先选择左侧的交底书</p>
                                    <p class="text-gray-300 text-xs">选择后将显示对应的查新记录</p>
                                </div>
                                
                                <!-- 查新记录列表 -->
                                <div id="noveltyRecordsList" class="hidden space-y-2 overflow-y-auto h-80">
                                    <!-- 查新记录项将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文件上传区域 - 改进设计 -->
                    <div id="uploadSection" class="hidden space-y-4">
                        <div class="flex items-center justify-between mb-3">
                            <a href="#" onclick="downloadTemplate()" class="text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline cursor-pointer flex items-center">
                                <i class="ri-download-line mr-1"></i>
                                下载文件模板
                            </a>
                            <!-- <span class="text-xs text-gray-500">支持 PDF、Word 格式</span> -->
                        </div>
                        
                        <div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-all duration-300" id="upload-area">
                            <div class="space-y-4">
                                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                                    <i class="ri-upload-cloud-2-line text-2xl text-blue-600"></i>
                                </div>
                                <div>
                                    <h3 class="text-sm font-medium text-gray-900 mb-1">拖拽文件到此处或点击上传</h3>
                                    <p class="text-gray-500 text-xs mb-4">支持 PDF、Word 格式，文件大小不超过 50MB</p>
                                    <input type="file" id="file-input" class="hidden" accept=".pdf,.doc,.docx">
                                    <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium" onclick="document.getElementById('file-input').click()">
                                        <i class="ri-folder-open-line mr-2"></i>选择文件
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 文件列表 - 改进显示 -->
                        <div id="file-list" class="hidden">
                            <h4 class="text-sm font-medium text-gray-700 mb-3">已选择的文件</h4>
                            <div id="file-items" class="space-y-2"></div>
                        </div>
                        
                        <!-- 上传进度 - 改进显示 -->
                        <div id="upload-progress" class="hidden bg-gray-50 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700">上传进度</span>
                                <span class="text-sm text-gray-600" id="progress-text">0%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full progress-bar transition-all duration-300" style="width: 0%" id="progress-bar"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部操作区域 - 改进设计 -->
                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <button class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-all duration-200 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center group" id="create-btn" disabled>
                            <i class="ri-magic-line mr-2 group-hover:animate-spin"></i>
                            <span>AI生成申请书</span>
                            <i class="ri-arrow-right-line ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </button>
                        <!-- <p class="text-xs text-gray-500 text-center mt-2">请先选择一个交底书或上传文件</p> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const disclosureSection = document.getElementById('disclosureSection');
        const disclosureList = document.getElementById('disclosureList');
        const uploadSection = document.getElementById('uploadSection');
        const createBtn = document.getElementById('create-btn');

        // 切换下拉菜单显示状态
        function toggleDropdown(button) {
            const dropdown = button.nextElementSibling;
            const allDropdowns = document.querySelectorAll('.absolute.right-0.top-full');
            
            // 关闭其他所有下拉菜单
            allDropdowns.forEach(dd => {
                if (dd !== dropdown) {
                    dd.classList.add('hidden');
                }
            });
            
            // 切换当前下拉菜单
            dropdown.classList.toggle('hidden');
        }

        // 点击页面其他地方时关闭下拉菜单
        document.addEventListener('click', function(event) {
            const dropdowns = document.querySelectorAll('.absolute.right-0.top-full');
            dropdowns.forEach(dropdown => {
                if (!dropdown.closest('.relative').contains(event.target)) {
                    dropdown.classList.add('hidden');
                }
            });
        });

        // 下载文件函数
        function downloadFile() {
            console.log('下载文件');
            // 在这里添加下载逻辑
        }

        // 分享文件函数
        function shareFile() {
            console.log('分享文件');
            // 在这里添加分享逻辑
        }

        function evaluateFile() {
            window.location.href = '../zhijian/evaluate.html';
        }

        // 删除文件函数
        function deleteFile() {
            console.log('删除文件');
            // 在这里添加删除逻辑
        }
        
        // 替换现有的标签页切换逻辑
        document.getElementById('textTab').addEventListener('click', function() {
            // 更新标签页状态
            this.classList.add('tab-active');
            document.getElementById('fileTab').classList.remove('tab-active');
            
            // 切换内容区域
            document.getElementById('disclosureList').classList.remove('hidden');
            document.getElementById('uploadSection').classList.add('hidden');
            
            // 重置按钮状态
            updateCreateButtonState();
        });

        document.getElementById('fileTab').addEventListener('click', function() {
            // 更新标签页状态
            this.classList.add('tab-active');
            document.getElementById('textTab').classList.remove('tab-active');
            
            // 切换内容区域
            document.getElementById('disclosureList').classList.add('hidden');
            document.getElementById('uploadSection').classList.remove('hidden');
            
            // 重置按钮状态
            updateCreateButtonState();
        });
        
        // 点击历史申请书列表
        const historySection = document.getElementById('historySection');
        const newApplicationSection = document.getElementById('newApplicationSection');
        
        // 显示申请书生成结果页面
        function showApplicationResult(step) {
            // 新打开editor.html页面，传递step参数
            window.open('editor.html?step=' + step, '_blank');
        }

        // 全局变量
        let selectedDisclosure = null;
        let selectedNoveltyRecord = null;
        
        // 模拟查新记录数据
        const noveltyRecordsData = {
            1: [
                {
                    id: 'nr001',
                    title: '创建人：40374503@qq.com',
                    createTime: '2024-01-16',
                    status: '已完成',
                    conclusion: '具有新颖性'
                }
            ],
            2: [
                {
                    id: 'nr003',
                    title: '创建人：40374503@qq.com',
                    createTime: '2024-01-21',
                    status: '查新中', 
                    conclusion: '具有新颖性'
                }
            ],
            3: [
            ]
        };
        
        // 交底书选择处理
        document.querySelectorAll('.disclosure-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除之前的选中状态
                document.querySelectorAll('.disclosure-item').forEach(el => {
                    el.classList.remove('border-blue-500', 'bg-blue-50');
                    el.classList.add('border-gray-200');
                });
                
                // 添加选中状态
                this.classList.remove('border-gray-200');
                this.classList.add('border-blue-500', 'bg-blue-50');
                
                selectedDisclosure = this;
                const disclosureId = this.getAttribute('data-disclosure-id');
                
                // 显示对应的查新记录
                showNoveltyRecords(disclosureId);
                
                // 更新按钮状态
                updateCreateButtonState();
            });
        });
        
        function goToChaxin(){
            window.location.href = '../jiaodishu/chaxin.html';
        }

        // 显示查新记录
        function showNoveltyRecords(disclosureId) {
            const noDisclosureSelected = document.getElementById('noDisclosureSelected');
            const noveltyRecordsList = document.getElementById('noveltyRecordsList');
            const totalNoveltyRecords = document.getElementById('totalNoveltyRecords');
            
            const records = noveltyRecordsData[disclosureId] || [];
            const record = records.length > 0 ? records[0] : null; // 每个交底书只有一条记录
            
            if (!record) {
                // 没有查新记录的情况
                noDisclosureSelected.innerHTML = `
                    <div class="flex flex-col items-center justify-center h-full">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                            <i class="ri-file-search-line text-2xl text-gray-400"></i>
                        </div>
                        <p class="text-gray-500 text-sm mb-2">暂无查新记录</p>
                        <p class="text-gray-400 text-xs mb-4">该交底书还没有进行查新对比</p>
                        <button onclick="goToChaxin()" class="px-4 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 transition-colors">
                            去查新
                        </button>
                    </div>
                `;
                noDisclosureSelected.classList.remove('hidden');
                noveltyRecordsList.classList.add('hidden');
                totalNoveltyRecords.textContent = '共 0 条';
                
                // 重置选中的查新记录
                selectedNoveltyRecord = null;
                updateCreateButtonState();
                return;
            }
            
            // 有查新记录的情况
            noDisclosureSelected.classList.add('hidden');
            noveltyRecordsList.classList.remove('hidden');
            totalNoveltyRecords.textContent = '共 1 条';
            
            // 根据查新状态显示不同内容
            if (record.status === '已完成') {
                // 查新已完成，显示正常的查新记录
                noveltyRecordsList.innerHTML = `
                    <div class="flex items-center justify-center h-full">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                                <i class="ri-check-line text-2xl text-green-600"></i>
                            </div>
                            <h5 class="text-sm font-medium text-gray-900 mb-2">查新已完成</h5>
                            <p class="text-xs text-gray-500 mb-4">修改时间：${record.createTime}</p>
                            <div>
                            </div>
                        </div>
                    </div>
                `;

                // 设置选中的查新记录
                selectedNoveltyRecord = record;
                
                
            } else {
                // 查新进行中或其他状态
                noveltyRecordsList.innerHTML = `
                    <div class="flex items-center justify-center h-full">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4 mx-auto">
                                <i class="ri-time-line text-2xl text-yellow-600"></i>
                            </div>
                            <h5 class="text-sm font-medium text-gray-900 mb-2">查新进行中</h5>
                            <p class="text-xs text-gray-500 mb-4">创建时间：${record.createTime}</p>
                            <button onclick="goToChaxin()" class="px-4 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 transition-colors">
                                去查新
                            </button>
                        </div>
                    </div>
                `;
                
                // 查新未完成时，不设置选中记录
                selectedNoveltyRecord = null;
            }
            
            // 更新按钮状态
            updateCreateButtonState();
        }

        // 更新创建按钮状态函数
        function updateCreateButtonState() {
            const createBtn = document.getElementById('create-btn');
            const textTabActive = document.getElementById('textTab').classList.contains('tab-active');
            const fileTabActive = document.getElementById('fileTab').classList.contains('tab-active');
            
            let canProceed = false;
            
            if (textTabActive && selectedDisclosure && selectedNoveltyRecord) {
                canProceed = true;
            } else if (fileTabActive && document.getElementById('file-items').children.length > 0) {
                canProceed = true;
            }
            
            createBtn.disabled = !canProceed;
            if (canProceed) {
                createBtn.classList.remove('opacity-50');
            } else {
                createBtn.classList.add('opacity-50');
            }
        }

        // 文件上传处理
        const uploadArea = document.getElementById('upload-area');
        const fileInput = document.getElementById('file-input');
        const fileList = document.getElementById('file-list');
        const fileItems = document.getElementById('file-items');
        const uploadProgress = document.getElementById('upload-progress');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        
        // 拖拽上传
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('dragover');
            const files = e.dataTransfer.files;
            handleFiles(files);
        });
        
        fileInput.addEventListener('change', function() {
            handleFiles(this.files);
        });
        
        function handleFiles(files) {
            for (let file of files) {
                if (validateFile(file)) {
                    displayFile(file);
                    simulateUpload(file);
                }
            }
        }
        
        function validateFile(file) {
            const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
            const maxSize = 50 * 1024 * 1024; // 50MB
            
            if (!allowedTypes.includes(file.type)) {
                alert('请上传 PDF 或 Word 格式的文件');
                return false;
            }
            
            if (file.size > maxSize) {
                alert('文件大小不能超过 50MB');
                return false;
            }
            
            return true;
        }
        
        // 改进的文件上传反馈
        function displayFile(file) {
            const fileItems = document.getElementById('file-items');
            const fileList = document.getElementById('file-list');
            
            const fileItem = document.createElement('div');
            fileItem.className = 'flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200';
            fileItem.innerHTML = `
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="ri-file-text-line text-blue-600"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900">${file.name}</p>
                        <p class="text-xs text-gray-500">${(file.size / 1024 / 1024).toFixed(2)} MB</p>
                    </div>
                </div>
                <button class="text-red-500 hover:text-red-700 p-1" onclick="removeFile(this)">
                    <i class="ri-close-line"></i>
                </button>
            `;
            
            fileItems.appendChild(fileItem);
            fileList.classList.remove('hidden');
            
            // 更新按钮状态
            updateCreateButtonState();
        }

        function removeFile(button) {
            button.closest('.flex').remove();
            
            // 如果没有文件了，隐藏文件列表
            const fileItems = document.getElementById('file-items');
            if (fileItems.children.length === 0) {
                document.getElementById('file-list').classList.add('hidden');
            }
            
            // 更新按钮状态
            updateCreateButtonState();
        }
      
        function simulateUpload(file) {
            uploadProgress.classList.remove('hidden');
            let progress = 0;
            
            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    
                    // 启用创建按钮
                    createBtn.disabled = false;
                    createBtn.classList.remove('opacity-50');
                    
                    setTimeout(() => {
                        uploadProgress.classList.add('hidden');
                    }, 1000);
                }
                
                progressBar.style.width = progress + '%';
                progressText.textContent = Math.round(progress) + '%';
            }, 200);
        }
        
        // 创建申请书按钮
        createBtn.addEventListener('click', function() {
            if (!this.disabled) {
                // 新打开editor.html页面
                window.open('editor.html?step=2', '_blank');
            }
        });

    </script>
</body>
</html>